<template>
	<view class="wrapper pingzheng">
		<!-- 头部筛选 -->
		<div class="posf head">
			<div class="center">
				<u-icon name="arrow-left" color="#333" size="20" @click="back"></u-icon>
				<div class="flex1 bfff center ml30">
					<u-icon name="search" color="#999" size="22"></u-icon>
					<input type="text" placeholder="请输入工装编号/名称/责任人" class="flex1 f28 ml15">
				</div>
			</div>
			<div class="space-between mt30">
				<uni-data-select class="top-select" v-model="params.state" :localdata="staterange" placeholder="电缆状态">

				</uni-data-select>
				<uni-data-picker class="top-select" v-model="params.departmentId" placeholder="使用部门"
					popup-title="请选择负责使用部门" :localdata="departmentrange" @change="onchange" @nodeclick="onnodeclick"
					:map="treemap">

				</uni-data-picker>
				<uni-data-select class="top-select" v-model="params.recheckCycleId" :localdata="recheckCyclerange"
					placeholder="复检周期">

				</uni-data-select>
			</div>
		</div>
		<div class="main">
			<navigator :url="'./detail?id='+v.id" class="bfff list-box mb30" v-for="v in data" :key="v.id">
				<div class="center mb30">
					<div class="f30 c333 flex1 nowrap">电缆编号：{{v.code}}</div>
					<div class="f28 c999">查看详情</div>
					<image src="../../static/my5.png" mode="widthFix" class="arr-icon mt5"></image>
				</div>
				<div class="middle-box bor25">
					<div class="space-between mb30">
						<div class="f28 c999">电缆名称</div>
						<div class="f28 c666 flex1 nowrap ml20">{{v.cableName}}</div>
					</div>
					<div class="space-between mb30">
						<div class="f28 c999">图号</div>
						<div class="f28 c666">Ru003.321</div>
					</div>
					<div class="space-between mb30">
						<div class="f28 c999">电缆状态</div>
						<div class="f28 c666">{{v.state}}</div>
					</div>
					<div class="space-between mb30">
						<div class="f28 c999">使用部门</div>
						<div class="f28 c666">销售部</div>
					</div>
				</div>
			</navigator>
			<div>
				<image src="../../static/list1.png" mode="widthFix" class="add-icon caozuo" @click="show=true"></image>
				<navigator url="./new">
					<image src="../../static/list2.png" mode="widthFix" class="add-icon "></image>
				</navigator>
			</div>
			<!-- 分页 -->
			<div class="page">
				<paging :total="total" :pageSize='params.limit' v-model="params.page" @changes="dd"></paging>
			</div>
			<!-- 操作菜单 -->
			<u-action-sheet @select="selectClick" :closeOnClickOverlay="true" :closeOnClickAction="true" :actions="list"
				title="操作" :show="show" @close="show=false"></u-action-sheet>
			<u-loading-page :loading="loading"></u-loading-page>
		</div>

	</view>
</template>

<script>
	import paging from '@/components/yang-paging/yang-paging.vue'
	export default {
		data() {
			return {
				params: {
					userId: '',
					state: '',
					departmentId: '',
					recheckCycle: '',
					page: 1,
					limit: 10
				},
				show: false,
				staterange: getApp().globalData.state,
				staterange: getApp().globalData.state,
				recheckCyclerange: getApp().globalData.recheckCycle,
				list: [{
						name: '请验入库',
						path: 'ruku'
					},
					{
						name: '出库领用',
						path: 'chuku'
					},
					{
						name: '复验',
						path: 'fuyan'
					}, {
						name: '报废',
						path: 'baofei'
					},
					{
						name: '封存',
						path: 'fengcun'
					},
					{
						name: '遗失',
						path: 'yishi'
					}
				],

				total: 0,
				data: [],
				loading: true
			}
		},
		components: {
			paging
		},
		onLoad() {
			this.params.userId = uni.getStorageSync('uinfo').id
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				this.params.page = 1
				this.findCableListByAll()
			},
			// 获取电缆列表-根据多个查询条件
			findCableListByAll() {
				this.loading = true
				this.$http('/api/findCableListByAll', this.params, 'GET').then(
					r => {
						this.loading = false
						this.data = r.data.list
						this.total = r.data.total
					}).catch(e => {
					this.loading = false
				})
			},
			selectClick(e) {
				console.log(e)
				this.show = false
				uni.navigateTo({
					url: '/pages/' + e.path + '/dian'
				})
			},
			dd(index) {
				if (this.curren != index) {
					this.curren = index
					this.init()
				}
			},
		}
	}
</script>

<style lang="scss">
	.add-icon {
		width: 120rpx;
		height: 120rpx;
		position: fixed;
		right: 16rpx;
		bottom: 130rpx;
	}

	.caozuo {
		bottom: 240rpx;
	}

	.middle-box {
		background: #F5F7FB;
		padding: 32rpx 28rpx 0;
		overflow: hidden;
	}

	.list-box {
		border-radius: 24rpx;
		padding: 28rpx;
	}

	.arr-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.main {
		padding: 250rpx 32rpx;
	}

	:deep(.top-select) {
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 90rpx;
		padding: 0 20rpx;
		flex: 1;
		width: max-content;
		max-width: 210rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		.uni-select__selector {
			min-width: 200rpx;
		}

		.uni-select__input-text {
			width: auto;
		}

		.uni-select__input-placeholder,
		.placeholder {
			font-size: 28rpx;
			color: #666666 !important;
			white-space: nowrap;
			flex: 1;
		}

		.uni-select {
			padding: 0;
			height: 68rpx;
		}
	}

	page {
		background: url(/static/homeBack.png) no-repeat #FAFAFA;
		background-size: 100% auto;
	}

	.head {
		background: url(/static/homeBack.png) no-repeat #FAFAFA;
		background-size: 100% auto;
		width: 100%;
		left: 0;
		top: 0;
		padding: 28rpx;

		.bfff {
			height: 80rpx;
			border-radius: 40rpx;
			padding: 0 20rpx;
		}
	}
</style>